﻿@*@page "/plugins"

@using North.Common
@using North.Core.Common
@using North.Core.Helpers

@inject ILogger _logger
@inject ISnackbar _snackbar
@inject IDialogService _dialog

<AuthorizeView Roles="User,Administrator">
    <MudStack Spacing="10" Row AlignItems="AlignItems.Center" Class="message_warn">
        <MudImage Src="icons/warn.svg" Width="180" Elevation="0" Class="rounded-lg ma-4" />
        <MudLink Href="/" Color="Color.Warning" Style="font-weight:bold; font-size:34px;">您的权限不足，无法访问</MudLink>
    </MudStack>
</AuthorizeView>
<AuthorizeView Roles="System">
    <MudStack Spacing="5" id="page">
        <MudTextField @bind-Value="@SearchPluginName" DebounceInterval="500" OnDebounceIntervalElapsed="@SearchPluginsAsync"
                      Variant="Variant.Text" Placeholder="请输入插件名称..." id="search-field"
                      Adornment="Adornment.End" AdornmentIcon="@Icons.Filled.Search" OnAdornmentClick="@SearchPluginsAsync" />
        @if(IsSearching)
        {
            <Loading Enable Style="position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;" />
        }
        else if(!ShowPlugins.Any())
        {
            <Empty />
        }
        else 
        {
            <MudGrid Justify="Justify.FlexStart" id="plugin-grid">
                @foreach (var plugin in ShowPlugins)
                {
                    <MudItem xs="12" lg="6">
                        <MudCard Outlined id="plugin-card">
                            <MudStack Row AlignItems="AlignItems.Center" id="plugin-stack" >
                                <MudAvatar Image="@plugin.IconUrl" Square id="plugin-stack-avatar" />
                                <MudStack id="plugin-stack-mid">
                                    <a href="@($"https://www.nuget.org/packages/{plugin.Name}")" style="font-size:22px; font-weight:300; line-height:.9; color:#337ab7;">@plugin.Name</a>
                                    <MudStack Row>
                                        <MudIcon Icon="@Icons.Outlined.Group"></MudIcon>
                                        <MudText>@plugin.Authors.FormatString(25)</MudText>
                                        <MudIcon Icon="@Icons.Outlined.FileDownload"></MudIcon>
                                        <MudText>@plugin.DownloadCount.FormatNumber()</MudText>
                                        <MudIcon Icon="@Icons.Outlined.Flag"></MudIcon>
                                        <MudText>@plugin.Version.ToNormalizedString()</MudText>
                                    </MudStack>
                                    <MudText Style="white-space:nowrap;">@plugin.Description</MudText>
                                </MudStack>
                                <MudStack Justify="Justify.FlexEnd" id="plugin-stack-button">
                                    @if(plugin.State is PluginState.UnInstall)
                                    {
                                        <MudTooltip Text="点击安装" Placement="Placement.Bottom">
                                            <MudIconButton Icon="@Icons.Filled.InstallDesktop" OnClick="@(() => InstallPlugin(plugin))"></MudIconButton>
                                        </MudTooltip>
                                    }
                                    else if(plugin.State is PluginState.Enable)
                                    {
                                        <MudMenu Icon="@Icons.Outlined.Settings" AnchorOrigin="Origin.BottomRight" ActivationEvent="MouseEvent.MouseOver">
                                            <MudMenuItem OnClick="@(() => DisablePlugin(plugin))">
                                                <MudStack Row>
                                                    <MudIcon Icon="@Icons.Outlined.LockOpen" />
                                                    <MudText>禁 用</MudText>
                                                </MudStack>
                                            </MudMenuItem>
                                            <MudMenuItem OnClick="@(() => UpdatePlugin(plugin))">
                                                <MudStack Row>
                                                    <MudIcon Icon="@Icons.Outlined.Sync" />
                                                    <MudText>更 新</MudText>
                                                </MudStack>
                                            </MudMenuItem>
                                            <MudMenuItem OnClick="@(() => UnInstallPlugin(plugin))">
                                                <MudStack Row>
                                                    <MudIcon Icon="@Icons.Outlined.Delete" />
                                                    <MudText>卸 载</MudText>
                                                </MudStack>
                                            </MudMenuItem>
                                        </MudMenu>
                                    }
                                    else if(plugin.State is PluginState.Disable)
                                    {
                                        <MudMenu Icon="@Icons.Outlined.Settings" AnchorOrigin="Origin.BottomRight">
                                            <MudMenuItem OnClick="@(() => EnablePlugin(plugin))">
                                                <MudStack Row>
                                                    <MudIcon Icon="@Icons.Outlined.Lock" />
                                                    <MudText>启 用</MudText>
                                                </MudStack>
                                            </MudMenuItem>
                                            <MudMenuItem  OnClick="@(() => UpdatePlugin(plugin))">
                                                <MudStack Row>
                                                    <MudIcon Icon="@Icons.Outlined.Sync" />
                                                    <MudText>更 新</MudText>
                                                </MudStack>
                                            </MudMenuItem>
                                            <MudMenuItem  OnClick="@(() => UnInstallPlugin(plugin))">
                                                <MudStack Row>
                                                    <MudIcon Icon="@Icons.Outlined.Delete" />
                                                    <MudText>卸 载</MudText>
                                                </MudStack>
                                            </MudMenuItem>
                                        </MudMenu>
                                    }
                                </MudStack>
                            </MudStack>
                        </MudCard>
                    </MudItem>
                }
            </MudGrid>
        }           
    </MudStack>
</AuthorizeView>

<style>
    #page {
        margin: 0 30px;
        width:calc(100% - 30px);
        height: fit-content;
        max-height: calc(100% - 55px);
    }

    #search-field {
        max-width:100%;
    }

    #plugin-grid {
        height: fit-content;
        max-width:100%;
        max-height: calc(100% - 30px);
        overflow:scroll;
        overflow-x:hidden;
    }

    #plugin-grid::-webkit-scrollbar {
        display:none;
    }

    #plugin-card {
        height:130px;
        border-radius:8px;
        border-width:2px;
    }

    #plugin-stack {
        width:100%; 
        height:100%; 
    }

    #plugin-stack-avatar {
        width:60px; 
        height:60px; 
        margin-left:10px;
        background-color:white;
    }

    #plugin-stack-mid {
        width:calc(100% - 130px);
        height:fit-content;
        overflow-x:hidden;
        margin-left:10px;
    }

    #plugin-stack-button {
        width:45px; 
        height:100%; 
        margin-right:5px;
        margin-bottom:5px;
    }

    .message_warn {
        width: fit-content;
        height: fit-content;
        left: 0;
        top: 0;
        bottom: 100px;
        right: 0;
        position: absolute;
        margin: auto;
    }
</style>*@